..<template>
  <div>
    <!-- 筛选 -->
    <div style="float: left;display: flex;margin-bottom: 10px;">
      <el-input
        @clear="initActReDeployment"
        clearable
        prefix-icon="el-icon-search"
        placeholder="请输入模型名称"
        class="initActReDeployment"
        v-model="deploymentPage.modelName"
        @keydown.enter.native="initActReDeploymentQuery">
      </el-input>
      <el-button style="margin-left: 8px;" icon="el-icon-search" type="info" @click="initActReDeploymentQuery">查询</el-button>
    </div>
    <div style="display: flex;justify-content: flex-end">
      <el-button
        type="primary"
        @click="resetCondition"><i class="el-icon-remove"></i><span>重置</span>
      </el-button>
      <el-button
        type="danger"
        title="如果此部署规则有实例正在使用则删除时抛出异常"
        @click="deleteDeployment"><i class="el-icon-delete"></i><span>普通删除</span>
      </el-button>
      <el-button
        type="danger"
        title="删除流程相关所有历史数据、包括流程实例、流程定义"
        @click="deleteDeploymented"><i class="el-icon-delete"></i><span>级联删除</span>
      </el-button>
    </div>
<!-- 列表 -->
    <div>
        <el-table
          :data="ActReDeploymentsList"
          stripe
          border
          style="width: 100%"
          v-loading="loading"
          element-loading-text="正在加载..."
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
                <el-table-column
                        label="模型名称"
                        width="250">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>模型名称: {{ scope.row.name }}</p>
                            <p>模型类型: {{ scope.row.modelCategory }}</p>
                            <p>模型版本: {{ scope.row.modelVersion }}</p>
                            <p>所属机构: {{ scope.row.tenantName }}</p>
                            <p>部署时间: {{scope.row.deploymentTime| dateFormat('YYYY-MM-DD HH:mm:ss')}}</p>
                            <p>部署key: {{ scope.row.deploymentKey }}</p>
                            <p>部署编号: {{ scope.row.deploymentId }}</p>
                            <p>类别编号: {{ scope.row.category }}</p>
                            <p>机构编号: {{ scope.row.tenantId }}</p>
                            <p>版本状态:
                                <el-tag type="success" v-if="scope.row.modelVersion != null">新版本</el-tag>
                                <el-tag type="danger" v-else>旧版本</el-tag>
                            </p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.name }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                        label="模型类型"
                        width="150">
                    <template slot-scope="scope">
                        <span>{{ scope.row.modelCategory }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="部署编号"
                        width="350">
                    <template slot-scope="scope">
                        <span>{{ scope.row.deploymentId }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="所属机构"
                        width="250">
                    <template slot-scope="scope">
                        <span>{{ scope.row.tenantName }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="部署状态" width="100">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.modelVersion != null">最新版本</el-tag>
                        <el-tag type="danger" v-else>旧版本</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        label="部署时间" width="250">
                    <template slot-scope="scope">
                        <span>{{scope.row.deploymentTime| dateFormat('YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                style="color: aquamarine;"
                                @click="viewActReDeployment(scope.row)"><i class="el-icon-view"></i>预览</el-button>
                        <el-button
                                type="text"
                                style="color: green;"
                                @click="doloadActReDeployment(scope.row)"><i class="el-icon-download"></i>下载</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="display: flex;justify-content: flex-end;margin-top: 8px;">
                <el-pagination
                        background
                        @current-change="currentChange"
                        @size-change="sizeChange"
                        layout="sizes, prev, pager, next, jumper, ->, total, slot"
                        :total="total">
                </el-pagination>
            </div>
        </div>
  </div>
</template>

<script>
export default {
 name:"workflowActReDeployment",
 data(){
   return{
    loading: false,
     // 封装查询条件
    deploymentPage:{
      modelName:'',
      pageNum: 1,
      pageSize: 10
    },
    // 初始化列表
    ActReDeploymentsList:[],
    total: 0,
    // 初始化多选复选框
    multipleSelection:[]
   }
  },
  mounted(){
    // 初始化列表
    this.initActReDeploymentQuery();
  },
 methods:{
   // 预览
   viewActReDeployment(data){
        this.$router.push({
            path: '/viewProcess',
            // 参数传递
            query: {
                deploymentId:data.deploymentId,
                viewPage:'workflowActReDeployment'
            }
        })
   },
   // 下载svg
   doloadActReDeployment(data){
        this.getRequest("/activity/ActReDeployment/query/ProcessModelSvgImage/"+data.deploymentId).then(resp => {
            if (resp) {
                const dataTrack = 'svg';
                const a = document.createElement('a');
                const name = data.name+`.${dataTrack}`;
                a.setAttribute(
                    'href',
                    `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(resp)}`
                );
                a.setAttribute('target', '_blank');
                a.setAttribute('dataTrack', `diagram:download-${dataTrack}`);
                a.setAttribute('download', name);
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            }
        });
   },
   // 普通删除
   deleteDeployment(){
    if (this.multipleSelection.length==1) {
          let deploymentId = '';
          let name = '';
          this.multipleSelection.forEach(item=>{
              deploymentId = item.deploymentId;
              name = item.name;
          })
          this.$confirm('此操作将永久删除【'+name+'】, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest('/activity/ActReDeployment/delete/ProcessDeploymentByDeploymentId/'+deploymentId).then(resp=>{
                        if (resp){
                            this.initActReDeploymentQuery();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                });
            });
      }else{
          this.$message({
                  type: 'warning',
                  message: '请选择一条操作记录！'
          });
      }
   },
   // 级联删除
   deleteDeploymented(){
    if (this.multipleSelection.length==1) {
          let deploymentId = '';
          let name = '';
          this.multipleSelection.forEach(item=>{
              deploymentId = item.deploymentId;
              name = item.name;
          })
          this.$confirm('此操作将永久删除【'+name+'】, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest('/activity/ActReDeployment/delete/ProcessDeploymentCascadeByDeploymentId/'+deploymentId).then(resp=>{
                        if (resp){
                            this.initActReDeploymentQuery();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                });
            });
      }else{
          this.$message({
                  type: 'warning',
                  message: '请选择一条操作记录！'
          });
      }
   },
   // 重置查询条件
    resetCondition(){
        this.deploymentPage.modelName = '';
        this.initActReDeploymentQuery();
    },
    initActReDeployment(){
      this.resetCondition();
    },
   // 初始化列表
   initActReDeploymentQuery(){
      this.loading = true;
        this.postRequest("/activity/ActReDeployment/query/ProcessDeploymentPageList",this.deploymentPage).then(resp => {
        this.loading = false;
        if (resp) {
          this.ActReDeploymentsList = resp.data.list;
          this.total = resp.data.total;
        }
    });
  },
  // 复选框
  handleSelectionChange(val){
    this.multipleSelection = val;
  },
   // 分页
  sizeChange(currentSize) {
    this.deploymentPage.pageSize = currentSize;
    this.initActReDeploymentQuery();
  },
  currentChange(currentPage) {
    this.deploymentPage.pageNum = currentPage;
    this.initActReDeploymentQuery();
  }
 }
}
</script>

<style>

</style>
